<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>CSS+JS打造的漂亮的弹出层图片预览效果丨芯晴网页特效丨CsrCode.Cn</title>
		<meta http-equiv="content-type" content="text/html;charset=gb2312">
		<!--把下面代码加到<head>与</head>之间-->
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: inside none none;
			}
			
			html {
				height: 100%;
				overflow: hidden;
			}
			
			body {
				background: #667594;
				font-size: 12px;
				font-family: "宋体";
				height: 100%;
				overflow: hidden;
			}
			
			img {
				border: none;
			}
			
			.imglist {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				border-top: 1px solid #fef;
				padding: 10px 0;
				width: 100%;
			}
			
			.imglist ul {
				overflow: hidden;
				zoom: 1;
			}
			
			.imglist li {
				float: left;
				margin: 0 10px;
				height: 100%;
			}
			
			.imglist li a {
				display: block;
				line-height: 0;
				font-size: 0;
				border: 1px solid #fff;
				padding: 1px;
			}
			
			.imglist li img {
				width: 100px;
			}
			
			.alt {
				color: #fff;
				display: block;
				width: 150px;
				height: 200px;
				text-align: center;
				margin: 300px auto 0 auto;
				font-size: 14px;
				font-weight: bold;
				line-height: 30px;
			}
			
			.imglist2 {
				bottom: 150px;
			}
		</style>
		<script type="text/javascript">
			function div(id) {
				return document.getElementById(id);
			}
			var ie = !-[1, ];
			var Obj = {
				Create: function(id, id2, ele) {
					var obj = document.createElement(ele);
					obj.setAttribute("id", id2);
					div(id).appendChild(obj);
				},
				del: function(id) {
					var obj = div(id);
					obj.parentNode.removeChild(obj);
				},
				inner: function(id, text) {
					div(id).innerHTML = text;
				},
				css: function() {
					this.cssinfo();
					var obj = div(this.css.id);
					with(obj.style) {
						ie ? (this.css.float != undefined ? styleFloat = this.css.float : "") : (this.css.float != undefined ? cssFloat = this.css.float : "");
						this.css.background != undefined ? background = this.css.background : "";
						this.css.width != undefined ? width = this.css.width : "";
						this.css.height != undefined ? height = this.css.height : "";
						this.css.position != undefined ? position = this.css.position : "";
						this.css.left != undefined ? left = this.css.left : "";
						this.css.top != undefined ? top = this.css.top : "";
						this.css.bottom != undefined ? bottom = this.css.bottom : "";
						this.css.padding != undefined ? padding = this.css.padding : "";
						this.css.margin != undefined ? margin = this.css.margin : "";
						this.css.filter != undefined ? filter = this.css.filter : "";
						this.css.opacity != undefined ? opacity = this.css.opacity : "";
						this.css.zIndex != undefined ? zIndex = this.css.zIndex : "";
						this.css.border != undefined ? border = this.css.border : "";
						this.css.overflow != undefined ? overflow = this.css.overflow : "";
						this.css.display != undefined ? display = this.css.display : "";
						this.css.textAlign != undefined ? textAlign = this.css.textAlign : "";
						this.css.fontSize != undefined ? fontSize = this.css.fontSize : "";
						this.css.color != undefined ? color = this.css.color : "";
						this.css.verticalAlign != undefined ? verticalAlign = this.css.verticalAlign : "";
						this.css.cursor != undefined ? cursor = this.css.cursor : "";
						this.css.lineHeight != undefined ? lineHeight = this.css.lineHeight : "";
					}
				},
				oEventX: function(e) {
					var e = window.event ? window.event : e;
					return e.clientX;
				},
				oEventY: function(e) {
					var e = window.event ? window.event : e;
					return e.clientY;
				}
			}
			var Create = Obj.Create,
				inner = Obj.inner,
				del = Obj.del,
				oX = Obj.oEventX,
				oY = Obj.oEventY;
			Obj.css.prototype.cssinfo = function() {
				this.css = css;
				return this;
			}
		</script>
	</head>

	<body>
		<!--把下面代码加到<body>与</body>之间-->
		<div id="ibody">
			<div class="imglist" id="imglist">
				<ul>
					<li>
						<a href="/images/1.jpg" title="哇！美女"><img src="/images/1.jpg" width="100px" height="125px" alt=""></a>
					</li>
					<li>
						<a href="/images/2.jpg" title="哇！美女"><img src="/images/2.jpg" width="100px" height="125px" alt=""></a>
					</li>
					<li>
						<a href="/images/3.jpg" title="哇！美女"><img src="/images/3.jpg" width="100px" height="125px" alt=""></a>
					</li>
					<li>
						<a href="/images/4.jpg" title="哇！美女"><img src="/images/4.jpg" width="100px" height="125px" alt=""></a>
					</li>
					<li>
						<a href="/images/5.jpg" title="哇！美女"><img src="/images/5.jpg" width="100px" height="125px" alt=""></a>
					</li>
					<li>
						<a href="/images/6.jpg" title="哇！美女"><img src="/images/6.jpg" width="100px" height="125px" alt=""></a>
					</li>
				</ul>
			</div>
			<div class="imglist imglist2" id="imglist2">
				<ul>
					<li>
						<a href="/images/wallpaper1.jpg" title="哇！美女"><img src="/images/wallpaper1.jpg" width="100px" height="125px" alt=""></a>
					</li>
					<li>
						<a href="/images/wallpaper2.jpg" title="哇！美女"><img src="/images/wallpaper2.jpg" width="100px" height="125px" alt=""></a>
					</li>
					<li>
						<a href="/images/wallpaper3.jpg" title="哇！美女"><img src="/images/wallpaper3.jpg" width="100px" height="125px" alt=""></a>
					</li>
					<li>
						<a href="/images/wallpaper4.jpg" title="哇！美女"><img src="/images/wallpaper4.jpg" width="100px" height="125px" alt=""></a>
					</li>
					<li>
						<a href="/images/wallpaper5.jpg" title="哇！美女"><img src="/images/wallpaper5.jpg" width="100px" height="125px" alt=""></a>
					</li>
					<li>
						<a href="/images/wallpaper6.jpg" title="哇！美女"><img src="/images/wallpaper6.jpg" width="100px" height="125px" alt=""></a>
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			function iShow(objid) {
				this.iControl = "1" /*1为图片大小自适应*/
				this.iControlSize = 0.8 /*最大图片大小占可视区域比例(此项需要this.iControl=1)*/
				this.ibody = "ibody"; /*bodyid*/
				this.bgid = "container" /*背景id*/
				this.borderid = "wrap"; /*边框id*/
				this.boxid = "imgwrap"; /*图像容器id*/
				this.listid = objid; /*图像列表id*/
				this.borderSize = 10; /*边框大小*/
				this.titleSize = 22; /*标题区域大小*/
				this.alpha = 3; /*透明度---1~10*/
				this.bgc = "000" /*背景色*/
				/*默认弹出框样式*/
				this.w = 420;
				this.h = 226;
				this.c = "#fff";
				this.w1 = this.w + this.borderSize * 2;
				this.h1 = this.h + this.borderSize * 2 + this.titleSize;
				this.c1 = "#eee";
			}
			iShow.prototype.iMouse = function() {
				/*鼠标事件*/
				var iDel = this.iDel;
				var iLoad = this.iLoad,
					iStyle = this.iStyle;
				var ele = {
					box: this.boxid,
					bd: this.borderid,
					bdSize: this.borderSize * 2,
					tSize: this.titleSize,
					iCount: this.iCount,
					iControl: this.iControl,
					iControlSize: this.iControlSize
				}
				var eles = div(this.listid).getElementsByTagName("a");
				for(var i = 0; i < eles.length; i++) {
					eles[i].onclick = function() {
						iStyle(iDel);
						iLoad(this, ele);
						return false;
					}
				}
			}
			iShow.prototype.iStyle = function(iDel) {
				/*对象初始化*/
				this.iShow.call(this)
				Create(this.ibody, this.bgid, "div");
				Create(this.ibody, this.borderid, "div");
				Create(this.ibody, this.boxid, "div");
				css = {
					id: this.bgid,
					width: "100%",
					height: "100%",
					opacity: 0.1 * this.alpha,
					background: "#" + this.bgc,
					filter: "alpha(opacity=" + 10 * this.alpha + ")",
					position: "absolute",
					top: 0,
					left: 0
				}
				new Obj.css;
				css = {
					id: this.borderid,
					background: this.c1,
					width: this.w1 + "px",
					height: this.h1 + "px",
					position: "absolute",
					margin: -this.h1 / 2 + "px " + "0 0 " + -this.w1 / 2 + "px",
					left: "50%",
					top: "50%",
					opacity: 0.2,
					overflow: "hidden",
					filter: "alpha(opacity=20)"
				}
				new Obj.css;
				css = {
					id: this.boxid,
					textAlign: "center",
					background: this.c,
					width: this.w + "px",
					height: this.h + "px",
					position: "absolute",
					margin: -(this.h + this.titleSize) / 2 + "px " + "0 0 " + -this.w / 2 + "px",
					left: "50%",
					top: "50%"
				}
				new Obj.css;
				inner(this.boxid, "<span style='display:block;margin-top:50px;color:#f30'>图片读取可能比较慢，请稍后……</span>")
				document.onkeydown = function(e) {
					var e = e ? e : window.event;
					if(e.keyCode == "27") {
						iDel();
					}
				}
				/*移动*/
				var obj1 = div(this.borderid);
				var obj2 = div(this.boxid);
				var Site = imgshow.Site;
				var Move = imgshow.Move;
				obj1.onmousedown = function() {
					Site(arguments[0], obj1, obj2);
					this.style.cursor = "move";
					document.onmousemove = function() {
						Move(arguments[0], obj1, obj2)
					};
				}
				document.onmouseup = function() {
					this.onmousemove = "";
					obj1.style.cursor = ""
				}
			}
			iShow.prototype.iLoad = function(e, ele) {
				var image = new Image();
				image.src = e.href;
				if(image.complete) {
					Reset();
				} else {
					image.onload = function() {
						Reset();
					}
				}

				function Reset() {
					var iw0 = image.width,
						ih0 = image.height;
					var W0 = iw0 + ele.bdSize,
						H0 = ih0 + ele.bdSize + ele.tSize;

					function curSize() {
						css = {
							id: borderid,
							width: W0 + "px",
							height: H0 + "px",
							left: "50%",
							top: "30px",
							margin: "0 0 0 " + -W0 / 2 + "px"
						};
						new Obj.css;
						css = {
							id: boxid,
							width: iw0 + "px",
							height: ih0 + "px",
							left: "50%",
							top: "30px",
							margin: ele.tSize / 2 + "px 0 0 " + -(W0 - ele.bdSize) / 2 + "px"
						};
						new Obj.css;
					}
					var Size = (image.width > document.body.clientWidth * ele.iControlSize || image.height > document.body.clientHeight * ele.iControlSize) ? true : false
					if(ele.iControl == "1" && Size == true) {
						var iInfo = ele.iCount(image, ele.iControlSize);
						image.width = iInfo.iW, image.height = iInfo.iH;
					}
					var bt1 = "<a href='#' style='color:#fff;left:20px;text-decoration:none;' onclick='imgshow.iDel()'>关闭</a>";
					var bt2 = "<a href='#' style='color:#fff;margin-left:20px;text-decoration:none;' id='iZoom_cur'>原图大小</a>"
					var bt = "<span style='float:right;width:100px;text-align:left;'>" + bt1 + bt2 + "</span>";
					var text1 = "<img src='" + image.src + "' style='width:100%' alt='" + e.title + "' />";
					var text2 = "<span id='imgshow_title'>" + bt + e.title + "</span>"
					var text = text1 + text2;
					var W = image.width + ele.bdSize,
						H = image.height + ele.bdSize + ele.tSize;
					css = {
						id: borderid,
						width: W + "px",
						height: H + "px",
						left: "50%",
						top: "50%",
						margin: -H / 2 + "px" + " 0 0 " + -W / 2 + "px"
					};
					new Obj.css;
					css = {
						id: boxid,
						width: image.width + "px",
						height: image.height + "px",
						left: "50%",
						top: "50%",
						margin: -(image.height + ele.tSize) / 2 + "px" + " 0 0 " + -image.width / 2 + "px"
					};
					new Obj.css;
					inner(ele.box, text);
					css = {
						id: "imgshow_title",
						width: "100%",
						height: "22px",
						position: "absolute",
						bottom: "-26px",
						left: 0,
						lineHeight: "22px",
						overflow: "hidden",
						color: "#fff"
					}
					new Obj.css;
					div("iZoom_cur").onclick = curSize;
				}
			}
			iShow.prototype.iCount = function(e, f) {
				var doc = document.body,
					W = doc.clientWidth * f,
					H = doc.clientHeight * f;
				var obj = e.width / W > e.height / H ? {
					iW: W,
					iH: e.height * W / e.width,
					iType: 1
				} : {
					iW: e.width * H / e.height,
					iH: H,
					iTyle: 2
				};
				return obj;
			}
			iShow.prototype.Site = function(e, obj1, obj2) {
				this.X = oX(arguments[0]);
				this.Y = oY(arguments[0]);
				this.oLeft1 = obj1.offsetLeft;
				this.oTop1 = obj1.offsetTop;
				this.oLeft2 = obj2.offsetLeft;
				this.oTop2 = obj2.offsetTop;
			}
			iShow.prototype.Move = function(e, obj1, obj2) {
				var X = oX(arguments[0]) - this.X,
					Y = oY(arguments[0]) - this.Y;
				var Left1 = this.oLeft1 + X,
					Top1 = this.oTop1 + Y,
					Left2 = this.oLeft2 + X,
					Top2 = this.oTop2 + Y;
				css = {
					id: obj1.id,
					left: Left1 + "px",
					top: Top1 + "px",
					margin: 0
				}
				new Obj.css;
				css = {
					id: obj2.id,
					left: Left2 + "px",
					top: Top2 + "px",
					margin: 0
				}
				new Obj.css;
			}
			iShow.prototype.iDel = function() {
				del(boxid);
				del(borderid);
				del(bgid);
				document.onkeydown = '';
			}
			var imgshow = new iShow("imglist");
			imgshow.iMouse();
			var imgshow2 = new iShow("imglist2");
			imgshow2.iMouse();
		</script>
	</body>

</html>